<jsp:useBean id="selectSort" scope="request" type="java.lang.Integer"/>
<%--
  Created by IntelliJ IDEA.
  User: kwc13
  Date: 2023-12-6
  Time: 上午 08:09
  To change this template use File | Settings | File Templates.
--%>
<!-- 标记为HTML格式 -->
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>
<!-- 设置页面为Chain -->
<html lang="ch">
<head>
    <title>小米商城后台管理</title>
    <!-- 设置地址栏主题背景颜色 -->
    <meta name="theme-color" content="#000000">
    <!-- 页面描述 -->
    <meta name="description" content="页面描述信息">
    <!-- 移动端显示 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 页面Logo -->
    <link rel="shortcut icon" href="http://localhost:8083/resource_packs/images/logo.png">
    <!-- CSS -->
    <link href="${pageContext.request.contextPath}/other/style/background/logistics.css" rel="stylesheet"
          type="text/css"/>
    <!-- JQuery -->
    <script src="${pageContext.request.contextPath}/other/component/jquery.min.js"></script>
    <!-- JS -->
    <script src="${pageContext.request.contextPath}/other/request/background/orders.js"></script>
    <script src="${pageContext.request.contextPath}/other/scripts/background/logistics.js"></script>
</head>
<body>
<jsp:useBean id="orderPage" scope="request" type="com.xm.entity.Page"/>
<c:set var="currentPage" value="${orderPage.pageNumber}"/>
<c:set var="totalPages" value="${orderPage.totalPages}"/>
<div class="son-body">
    <div class="head">
    <span class="title-context">
        物流管理
    </span>
        <div class="search">
            <div class="searchi-input">
                <label>
                    <input type="text" placeholder="请输入订单号/收货人" class="nameOrId">
                </label>
            </div>
            <div class="search-img">
                <img src="http://localhost:8083/resource_packs/images/search_%23fff.png" alt="搜索">
            </div>
        </div>
    </div>
    <div class="other-function">
        <div class="sift-function" current-page="${currentPage}"
             page-size="${orderPage.pageSize}"
             date-sort="${selectSort}">
            <div class="sift">
                <label for="state">状态 :</label>
                <select name="choose-head" id="state">
                    <option value="6">送货中</option>
                    <option value="7">分拣中</option>
                    <option value="8">送货中</option>
                    <option value="9">已送达</option>
                </select>
            </div>
            <div class="sift">
                <label>时间 :</label>
                <label>
                    <input name="date" type="radio" value="ASC"
                           class="chronological-ordering" ${selectSort == 1 ? 'checked' : '' }/>
                    <a style="font-weight: 500;">倒叙</a>
                </label>
                <label>
                    <input name="date" type="radio" value="DESC"
                           class="chronological-ordering" ${selectSort == 1 ? '' : 'checked' }/>
                    <a style="font-weight: 500;">正序</a>
                </label>
            </div>
        </div>
        <div class="sift-button">
            <button class="inquire-button">查询</button>
        </div>
    </div>
    <div class="table-body">
        <table>
            <thead>
            <tr>
                <th class="table-title-th">运单号</th>
                <th class="table-title-th">收货人</th>
                <th class="table-title-th">商品件数</th>
                <th class="table-title-th">下单时间</th>
                <th class="table-title-th">总价格</th>
                <th class="table-title-th">支付方式</th>
                <th class="table-title-th">状态</th>
                <th class="operation table-title-th">操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="orders" items="${orderPage.data}">
                <tr>
                    <td class="table-tbody-tr">${orders.ordersId}</td>
                    <td class="table-tbody-tr">${orders.address.addressName}</td>
                    <td class="table-tbody-tr">${orders.totalMerchandise}</td>
                    <td class="table-tbody-tr">${orders.placeOrderDate}</td>
                    <td class="table-tbody-tr">${orders.paymentPrice}</td>
                    <td class="table-tbody-tr">
                        <c:if test="${orders.paymentMethods == 0}">
                            支付宝支付
                        </c:if>
                        <c:if test="${orders.paymentMethods == 1}">
                            微信支付
                        </c:if>
                        <c:if test="${orders.paymentMethods == 2}">
                            银行卡支付
                        </c:if>
                    </td>
                    <td class="table-tbody-tr">
                        <c:if test="${orders.ordersStatus  == 6}">
                            运货中
                        </c:if>
                        <c:if test="${orders.ordersStatus  == 7}">
                            分拣中
                        </c:if>
                        <c:if test="${orders.ordersStatus  == 8}">
                            送货中
                        </c:if>
                        <c:if test="${orders.ordersStatus  == 9}">
                            送达
                        </c:if>
                    </td>
                    <td class="operation-button table-tbody-tr">
                        <button class="view-button" order-id="${orders.ordersId}">查看</button>
                    </td>
                </tr>
            </c:forEach>
            <tr>

            </tbody>
        </table>
    </div>
    <div class="pagination-function">
        <div class="pagination">

            <%-- 计算前后页码 --%>
            <%-- 如果当前页码不是第一页，则显示“首页”和“上一页”按钮 --%>
            <c:if test="${currentPage > 1}">
                <a class="page-button"
                   href="${pageContext.request.contextPath}/background/home?menuId=104&pageNo=1">首页</a>
                <a class="page-button"
                   href="${pageContext.request.contextPath}/background/home?menuId=104&pageNo=${currentPage - 1}">上一页</a>
            </c:if>

            <%-- 显示当前页码和总页数 --%>
            <span class="page-info">第 ${currentPage} 页 / 共 ${totalPages} 页</span>

            <%-- 如果总页数大于 7 --%>
            <c:if test="${totalPages > 7}">
                <%-- 如果当前页码小于等于 4，则显示前 5 个页码按钮 --%>
                <c:if test="${currentPage <= 4}">
                    <c:forEach var="i" begin="1" end="5">
                        <c:if test="${i <= totalPages}">
                            <a class="page-button"
                               href="${pageContext.request.contextPath}/background/home?menuId=104&pageNo=${i}">${i}</a>
                        </c:if>
                    </c:forEach>
                    <%-- 显示省略号 --%>
                    <span class="page-ellipsis">...</span>
                </c:if>

                <%-- 如果当前页码大于总页数减 4，则显示后 5 个页码按钮 --%>
                <c:if test="${currentPage > totalPages - 4}">
                    <%-- 显示省略号 --%>
                    <span class="page-ellipsis">...</span>
                    <c:forEach var="i" begin="${totalPages - 4}" end="${totalPages}">
                        <c:if test="${i <= totalPages}">
                            <a class="page-button"
                               href="${pageContext.request.contextPath}/background/home?menuId=104&pageNo=${i}">${i}</a>
                        </c:if>
                    </c:forEach>
                </c:if>

                <%-- 如果当前页码在中间位置，则显示当前页码前后各 2 个页码按钮 --%>
                <c:if test="${currentPage > 4 && currentPage <= totalPages - 4}">
                    <%-- 显示省略号 --%>
                    <span class="page-ellipsis">...</span>
                    <c:forEach var="i" begin="${currentPage - 2}" end="${currentPage + 2}">
                        <c:if test="${i <= totalPages}">
                            <a class="page-button"
                               href="${pageContext.request.contextPath}/background/home?menuId=104&pageNo=${i}">${i}</a>
                        </c:if>
                    </c:forEach>
                    <span class="page-ellipsis">...</span>
                </c:if>
                <%-- 显示省略号 --%>
            </c:if>

            <%-- 如果总页数小于等于 7 --%>
            <c:if test="${totalPages <= 7}">
                <c:forEach var="i" begin="1" end="${totalPages}">
                    <a class="page-button"
                       href="${pageContext.request.contextPath}/background/home?menuId=104&pageNo=${i}">${i}</a>
                </c:forEach>
            </c:if>

            <c:if test="${currentPage < totalPages}">
                <a class="page-button"
                   href="${pageContext.request.contextPath}/background/home?menuId=104&pageNo=${currentPage + 1}">下一页</a>
                <a class="page-button"
                   href="${pageContext.request.contextPath}/background/home?menuId=104&pageNo=${totalPages}">尾页</a>
            </c:if>
            <%-- 如果当前页码不是最后一页，则显示“下一页”和“尾页”按钮 --%>
        </div>
    </div>
</div>
<!-- 弹窗 -->
<div class="window" style="display: none ">
    <div class="pop-up-shade-layer"></div>
    <div class="pop-ups">
        <div class="pop-ups-title">
            <span>物流详情</span>
            <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
                 alt="弹窗关闭" class="pop-ups-down">
        </div>
        <div class="pop-ups-context">
            <div class="recipient-information">
                <div class="addressee-information">
                    <span>运单号 :</span>
                    <a class="tracking-number"></a>
                </div>
                <div class="addressee-information">
                    <span class="addressee-information">收件人 :</span>
                    <a class="addressee"></a>
                </div>
                <div class="addressee-information">
                    <span class="addressee-information">收货地址 :</span>
                    <a class="delivery-address"></a>
                </div>
                <div class="addressee-information">
                    <span class="addressee-information">手机号 :</span>
                    <a class="mobile-phone-number"></a>
                </div>
            </div>
            <div class="purchased-goods">
                <div class="table">
                    <div class="table-row table-header">
                        <div class="table-cell">编号</div>
                        <div class="table-cell">商品名称</div>
                        <div class="table-cell">单价</div>
                        <div class="table-cell">数量</div>
                    </div>
                    <div class="table-body goods-tbody orders-table-body" style="height: 170px;">

                    </div>
                </div>
            </div>
            <div class="merchandise-settlement">
                <div class="settlement">
                    <div class="other-settlement">
                        <div class="order-date">
                            <a>下单时间 : </a>
                            <span class="place-order-date"></span>
                        </div>
                        <div class="order-date">
                            <a>预计到达时间 :</a>
                            <span class="estimated-time-arrival"></span>
                        </div>
                        <div class="coupon">
                            <div class="use-coupon">
                                <a>使用优惠卷 :</a>
                                <a class="use-coupon-name"></a>
                                <span class="use-coupon-discount"></span>
                            </div>
                            <div>
                                <a>优惠卷抵扣 : </a>
                                <span class="coupon-credit"></span>
                            </div>
                        </div>
                        <div>
                            <a>总件数 : </a>
                            <span class="total-number"></span>
                        </div>
                        <div>
                            <a>总价格 : </a>
                            <span class="total-price"></span>
                        </div>
                        <div>
                            <a>运费 : </a>
                            <span class="freight"></span>
                        </div>
                        <div class="other-order">
                            <a>订单状态 :</a>
                            <span class="order-status"></span>
                        </div>
                        <div class="other-order">
                            <a>支付方式 :</a>
                            <span class="payment-methods"></span>
                        </div>
                    </div>
                    <div class="separate">

                    </div>
                    <div class="shipments-from">
                        <div class="other-order">
                            <a>运输方式 :</a>
                            <span class="shipping-method"></span>
                        </div>
                        <div class="other-order">
                            <a>物流公司 :</a>
                            <span class="logistics-companies"></span>
                        </div>
                        <div class="other-order">
                            <a>物流站 :</a>
                            <span class="logistics-station"></span>
                        </div>
                        <div class="other-order">
                            <a>货源 :</a>
                            <span class="source"></span>
                        </div><br>
                        <button class="go-map" >查看物流</button>
                    </div>
                </div>
                <div class="window-button">

                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
